<script type="text/template" id="user-create-edit-template">
<!--
  DeviceHive Admin Console templates

  Copyright (C) 2016 DataArt

  Licensed under the Apache License, Version 2.0 (the "License");
  you may not use this file except in compliance with the License.
  You may obtain a copy of the License at

      http://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License.

-->
    <div class="panel panel-primary">
        <div class="panel-heading"><h3 class="panel-title"><%= HeadingText %></h3></div>
        <div class="panel-body">
            <div class="form-horizontal col-lg-6">
                <div class="form-group">
                    <label class="col-lg-2 control-label">Login:</label>
                    <div class="col-lg-9">
                        <input class="form-control" type="text" id="login" value="<%= login %>" minlength="3" maxlength="128"/>
                        <span id="login-length-error" class="validation-errors">User name should be at least 3 characters and do not exceed 128 characters</span>
                        <span id="login-pattern-error" class="validation-errors">User name can contain only letters, numbers and @_.- symbols</span>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-lg-2 control-label">Role:</label>
                    <div class="col-lg-9">
                        <select class="form-control col-lg-9" id="role">
                           <% _.each(Roles,function(value,key) {
                               if(value == role){
                                   %>
                                   <option value=<%=value%> selected="selected"><%=key %></option>
                                   <%
                               }
                               else{
                                   %>
                                   <option value=<%=value%>><%=key %></option>
                                   <%
                               }
                           }); %>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-lg-2 control-label">Status:</label>
                    <div class="col-lg-9">
                        <select class="form-control" id="status">
                           <% _.each(Statuses,function(value,key){
                               if(value == status){
                                   %>
                                   <option value=<%=value%> selected="selected"><%=key %></option>
                                   <%
                               }
                               else{
                                   %>
                                   <option value=<%=value%>><%=key %></option>
                                   <%
                               }
                           }); %>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-lg-2 control-label">Password:</label>
                    <span class="glyphicon glyphicon-info-sign password-info-icon" data-toggle="tooltip" title="This field is mandatory if you want to create a new user."></span>
                    <div class="col-lg-9">
                        <input class="form-control" id="password" type="password"/>
                        <span id="password-length-error" class="validation-errors">User password should be at least 6 characters and do not exceed 128 characters</span>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-lg-2 control-label">Password confirmation:</label>
                    <div class="col-lg-9">
                        <input class="form-control" id="password-confirmation" type="password"/>
                        <span id="password-confirmation-match-error" class="validation-errors">Passwords do not match. Please check them one more time.</span>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-lg-2 control-label">Data (Json):</label>
                    <div class="col-lg-9">
                        <textarea class="form-control" type="text" id="data" cols="40" rows="5" ><%= data %></textarea>
                        <span id="data-format-error" class="validation-errors">Data should be valid Json</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="panel-footer">
            <a href="javascript:void(0)" class="save edit-button btn btn-success"><%= saveButtonText %></a>
            <a href="javascript:void(0)" class="close-form view-button btn btn-warning">close</a>
        </div>
    </div>
</script>
